<template>
	<view class="myOrder" @touchstart="touchStart" @touchend="touchEnd">
		<view class="flexClsLeftLinkAutoWid bg-white" >
			<view style="padding:10px 0;width: 63px;text-align: center;" v-for="(item,index) in list1"
				:class="current==index? 'active':''" @click="tabs(index)" @click.stop="e_click(index)">
				{{item.name}}
			</view>
		</view>
		<!-- 已下单 -->
		<view class="content" v-if="current==0" style="padding: 15px 15px 0 15px; border-radius: 10px;">
			<view style="background: #FFFFFF;padding:15px;" class="shadow rounded-2">
				<view style="display: flex;border-radius: 8px;align-items: center;margin-top: 10px;">
					<image style="display:block ;width:90px;height:90px;" src="../../static/image/weChat-pyq.png">
					</image>
					<view style="width:220px; margin-left:11px;">
						<view style="font-size: 16px;line-height: 22px;">代跑腿，全城使命必达</view>
						<!-- <text style="background: #EDFFEB;border-radius: 2px;border: 1px solid #C9E8C6;padding: 1px 6px;font-size: 10px;color: #427705;margin-top:10px;display: inline-block;">同城跑腿配送</text> -->
						<view style="color: #666666;font-size: 10px;margin-top: 8px;" class="flexClsNowrapSpcBtw">
							<view>¥20.00/次</view>
							<view style="color: #666666;font-size: 10px;">×1</view>
						</view>
						<view style="margin-top:10px;line-height: 20px;" class="flex ">
							<view style="color:#333333 ;">实付款<text style="font-size: 10px;color#333333 ">¥</text><text
									style="font-size: 15px;color:#333333 ;font-weight: bold">20.00</text></view>

						</view>
					</view>
				</view>
				<view style="margin-top:15px;display: flex;justify-content:space-between;align-items: center;">
					<view style=" color: #999999;font-size: 12px;">下单时间:2022.12.11 11:12</view>
					<view @click="refund()"
						style="font-size:11px ; border: 1px solid #CCCCCC;padding:4px 10px ;border-radius: 16px;">申请退款
					</view>
					<view style="font-size:11px ; border: 1px solid #CCCCCC;padding:4px 10px ;border-radius: 16px;">再来一单
					</view>
				</view>
			</view>
		</view>
		<!-- 待评价 -->
		<view class="content" v-if="current==1" style="padding: 15px 15px 0 15px; border-radius: 10px;">
			<view style="background: #FFFFFF;padding:15px;" class="shadow rounded-2">
				<view style="display: flex;border-radius: 8px;align-items: center;margin-top: 10px;">
					<image style="display:block ;width:90px;height:90px;" src="../../static/image/weChat-pyq.png">
					</image>
					<view style="width:220px; margin-left:11px;">
						<view style="font-size: 16px;line-height: 22px;">代跑腿，全城使命必达</view>
						<!-- <text style="background: #EDFFEB;border-radius: 2px;border: 1px solid #C9E8C6;padding: 1px 6px;font-size: 10px;color: #427705;margin-top:10px;display: inline-block;">同城跑腿配送</text> -->
						<view style="color: #666666;font-size: 10px;margin-top: 8px;" class="flexClsNowrapSpcBtw">
							<view>¥20.00/次</view>
							<view style="color: #666666;font-size: 10px;">×1</view>
						</view>
						<view style="margin-top:10px;line-height: 20px;" class="flex ">
							<view style="color:#333333 ;">实付款<text style="font-size: 10px;color#333333 ">¥</text><text
									style="font-size: 15px;color:#333333 ;font-weight: bold">20.00</text></view>
			
						</view>
					</view>
				</view>
				<view style="margin-top:15px;display: flex;justify-content:space-between;align-items: center;">
					<view style=" color: #999999;font-size: 12px;">下单时间:2022.12.11 11:12</view>
					<view style="font-size:12px ; border: 1px solid #CCCCCC;padding:4px 10px ;border-radius: 16px;">再来一单
					</view>
					<view @click="evaluate()"
					style="font-size:12px ; border: 1px solid #427705 ;padding:4px 10px ;border-radius: 16px;color:#427705;" >评价</view>
				</view>
			</view>
		</view>
		<!-- 已完成 -->
		<view class="content" v-if="current==2" style="padding: 15px 15px 0 15px; border-radius: 10px;">
			<view style="background: #FFFFFF;padding:15px;" class="shadow rounded-2">
				<view style="display: flex;border-radius: 8px;align-items: center;margin-top: 10px;">
					<image style="display:block ;width:90px;height:90px;" src="../../static/image/weChat-pyq.png">
					</image>
					<view style="width:220px; margin-left:11px;">
						<view style="font-size: 16px;line-height: 22px;">代跑腿，全城使命必达</view>
						<view style="color: #666666;font-size: 10px;margin-top: 8px;" class="flexClsNowrapSpcBtw">
							<view>¥20.00/次</view>
							<view style="color: #666666;font-size: 10px;">×1</view>
						</view>
						<view style="margin-top:10px;line-height: 20px;" class="flex ">
							<view style="color:#333333 ;">实付款<text style="font-size: 10px;color#333333 ">¥</text><text
									style="font-size: 15px;color:#333333 ;font-weight: bold">20.00</text></view>
						</view>
					</view>
				</view>
				<view style="margin-top:15px;display: flex;justify-content:space-between;align-items: center;">
					<view style=" color: #999999;font-size: 12px;">下单时间:2022.12.11 11:12 </view>
					<view style="font-size:12px ; border: 1px solid #CCCCCC;padding:4px 10px ;border-radius: 16px;">再来一单
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '全部订单',
				}, {
					name: '待评价',
				}, {
					name: '退款/售后'
				}],
				current: 0
			}
		},
		watch:{
			current:{
				handler(newval, oldval) {
				    console.log(oldval,newval)
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			tabs(index) {
				this.current = index
			},
			refund() {
				uni.navigateTo({
					url: './refund'
				});
			},
			evaluate(){
				uni.navigateTo({
					url: './evaluate'
				});
			},
			//滑动切换tabar
			e_click(index) {
				this.current = index;
			},
			//触摸  逻辑：开始创建元素，根据结束的与初始值的差距判断
	        touchStart(e) {  
	            this.touchStartX = e.touches[0].clientX;  
	            this.touchStartY = e.touches[0].clientY;  
	        },          
	        touchEnd(e) {  
	            let deltaX = e.changedTouches[0].clientX - this.touchStartX;  
	            let deltaY = e.changedTouches[0].clientY - this.touchStartY;  
	            if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {  
	                if (deltaX >= 0) {  //右滑
	        			if(this.current == 0 ){// 如果等于0  有别的需求(比如网络请求啥的都可以写)
	        				this.current = 0
	        			}else if(this.current == 1 ){
	        				this.current = 0
	        			}else if(this.current == 2 ){
	        				this.current = 1
	        			}
	                } else {  //左滑
	        			if(this.current == 0 ){
	        				this.current = 1
	        			}else if(this.current == 1 ){
	        				this.current = 2
	        			}else if(this.current == 2 ){
	        				this.current = 2
	        			}
	                }  
	            } else if(Math.abs(deltaY) > 50&& Math.abs(deltaX) < Math.abs(deltaY)) {  
	                if (deltaY < 0) {  //上拉
	                } else {  //下拉
	                }  
	            } else {  //幅度小或者是点击 
	            }  
	        },

		}
	}
</script>

<style>
	.myOrder{
		width: 100vw;
		height: 100vh;
	}
	page {
		background: #F4F4F4;
	}

	.active {
		color: #427705;
		border-bottom: 4px solid #427705
	}
</style>
